<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>+++</button>
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <script>
    var lis = document.querySelectorAll('li')
    var btn = document.querySelector('button')
    var ul = document.querySelector('ul')

    // for (var i = 0; i < lis.length; i++) {
    //   lis[i].onclick = function () {
    //     console.log(this.innerHTML);
    //   }
    // }

    // 更聪明的方式
    // 讲子元素的事件利用事件冒泡的机制，委托给父元素 =》  【事件委托】
    ul.onclick = function (e) {
      if (e.target.tagName == 'LI') {
        console.log(e.target.innerHTML);
      }
    }

    var count = 3
    btn.onclick = function () {
      ul.insertAdjacentHTML('beforeend', `
        <li>${count}</li>
      `)
      count++;
      // 最笨的
      // lis = document.querySelectorAll('li')
      // for (var i = 0; i < lis.length; i++) {
      //   lis[i].onclick = function () {
      //     console.log(this.innerHTML);
      //   }
      // }

      // 聪明一点
      // var li = document.createElement('li');
      // li.innerHTML = count
      // li.onclick = function () {
      //   console.log(this.innerHTML);
      // }
      // count++
      // ul.appendChild(li);

    }



    // 后生成的li没有帮定上事件

  </script>
</body>

</html>